<!-- 样式 -->
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/home/serchInfo.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css">
</script>
<style scoped>
    #pmc081 {
        width: 34%;
        line-height: 26px;
        font-size: 12px;
        list-style: none;
        border: 1px solid;
        border-color: #e6e6e6;
        padding-left: 10px;
        background-color: #fff;
    }
    #typeTree_tree{
      width: auto;
    }
      .layui-table-cell{
        margin: auto;
    }
</style>
<div class="layui-container accountForm">
    <form class="box layui-row layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-form-tags">
        <div class="layui-col-sm4 layui-col-md4 layui-col-xs4 ">
            <div class="layui-form-item SelectGroup">
                <label for=" " class="lable layui-form-label ">
                   
                    <span class="DEVNumber" data-lang="equipmentNumber">设备编号：</span>
                </label>
                <div class="layui-input-block">
                    <input type="text" name="fia01" placeholder="" autocomplete="off" class="layui-input"
                    id="tcDetailFia01">
                </div>
            </div>
            <div class="layui-form-item">
                <label for=" " class="lable layui-form-label ">
                    <span class="assetNumber" data-lang="assetNumber">资产编号：</span>
                </label>
                <div class="layui-input-block">
                    <input type="text" name="fia011" placeholder="" autocomplete="off" class="layui-input"
                    id="fia011">
                </div>
            </div>
            <div class="layui-form-item ">
                <!-- equipmentType -->
                <label for=" " class="lable layui-form-label ">
                    <span class="deviceType" data-lang="deviceType">设备类型：</span>
                </label>
                <div class="layui-input-block ">
                    <input type="text" name="fia03" placeholder="" autocomplete="off" class="layui-input"
          id="typeTree" style="cursor:pointer">
          <input type="text" name="fia03" placeholder="" autocomplete="off" class="layui-input"
          id="typeTreeTwo" style="display:none;">
                </div>
            </div>
            <div class="layui-form-item">
                <!-- equipmentActive -->
                <label for=" " class="lable layui-form-label ">
                    <span class="DEVStatus" data-lang="DEVStatus">设备状态：</span>
                </label>
                <div class="layui-input-block">
                    <select name="fiaacti" id="fiaId" lay-search>
                        <option value="">请选择</option>
                        <option value="0">一般</option>
                        <option value="1">良好</option>
                        <option value="2">不稳定</option>
                        <option value="3">折旧中</option>
                        <option value="4">外送</option>
                        <option value="5">折毕</option>
                        <option value="6">出售</option>
                        <option value="7">报废</option>
                        <option value="8">折毕再提</option>
                        <option value="9">改良</option>
                        <option value="A">重估</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="lable layui-form-label ">
                    <span class="DEVSeries" data-lang="DEVSeries">设备系列：</span>
                </label>
                <div class="layui-input-block ">
                    <select name="tcSeriesId" id="tcSeriesName" placeholder="请输入" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div class=" layui-col-sm4 layui-col-md4 layui-col-xs4 ">

            <div class="layui-form-item">
                <label for=" " class="lable layui-form-label ">
                    <span class="unitType" data-lang="unitType">设备型号：</span>
                </label>
                <div class="layui-input-block ">
                    <select name="fia05" id="fii02" lay-search>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="pmc-box">
                <!-- supplier -->
                <label for=" " class="lable layui-form-label ">
                    <span class="supplier" data-lang="supplier">供应商：</span>
                </label>
                <div class="layui-form-input">
                    <input calss="layui-input" type="text" name="pmc01" id="pmc081">
                    <i class="layui-edge"></i>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="lable layui-form-label ">
                    <span class="Factory" data-lang="Factory">所在厂房：</span>
                </label>
                <div class="layui-input-block">
                    <select name="fia14" id="param" lay-filter="myselect" lay-search>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for=" " class="lable layui-form-label ">
                    <span class="DeviceLocation" data-lang="floor">所在楼层：</span>
                </label>
                <div class="layui-input-block">
                    <select name="fia15" id="param-two" lay-search>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <!-- workProcess -->
                <label for=" " class="lable layui-form-label ">
                    <span class="process">所属站别：</span>
                </label>
                <div class="layui-input-block ">
                    <select name="tcProcId" id="tcProcName" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div class=" layui-col-sm4 layui-col-md4 layui-col-xs4 ">
            <div class="layui-form-item">
                <label for=" " class="lable layui-form-label ">
                    <span class="DEVTransferPersonnel ">所属线别：</span>
                </label>
                <div class="layui-input-block">
                    <select name="fia17" id="tcLineName" lay-search>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="lable layui-form-label ">
                    <span class="responsibleDepartment" data-lang="responsibleDepartment">负责部门：</span>
                </label>
                <div class="layui-input-block">
                    <input type="text" id="gem02" name="gen" autocomplete="off" class="layui-input">
                    <input type="text" id="gem03" name="gem01" autocomplete="off" class="layui-input"
                        style="display: none;">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <!-- preserver -->
                <label for=" " class="lable layui-form-label ">
                    <span class="custodian " data-lang="custodian">保管人工号：</span>
                </label>
                <div class="layui-input-block ">
                    <input type="text" id="gen02" name="gen01" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for=" " class="lable layui-form-label ">
                    <span class="DEVTransferPersonnel " data-lang="DEVTransferPersonnel">设备调机人员工号：</span>
                </label>
                <div class="layui-input-block">
                    <input type="text" id="gen01" name="gen021" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>
        <div class="ButtonGroup layui-layui-container layui-form-item ">
            <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 ">
                <button class="labelinp query" data-lang="Inquire" data_cn="查询 " data_en="Query" lay-submit
                    lay-filter="*">查询</button>
                <button class="labelinp reset" data-lang="Empty" data_cn="清空 " data_en="Delete" >清空</button>
            </div>
        </div>
    </form>
    <div class="layui-row layui-col-md12">
        <table id="table" lay-filter="search-table-one" class="layui-table"></table>
    </div>
</div>
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
</script>
<script type="text/html" id="addDeviceTpl">
    <style scoped>
        .footer button{
            margin-top: 30px;
        }
        .leon-style-alert .layui-table-page,.layui-table-page .layui-laypage input{
             background-color:transparent;   
        }
        .leon-style-alert .layui-table-page .layui-laypage input{
            border: 1px solid #e2e2e2;
            border-radius:2px;
        }
        .leon-style-alert .layui-table-view{
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }
        .leon-style-alert .layui-form input{
            height:auto;
            line-height:inherit;
        }
    </style>
    <div class="leon-style-alert layui-form">
      <div class="layui-alert-box">
        <div class="layui-alert-title">
          <span class="layui-title-inner">供应商选择</span>
          <span class="layui-title-screen">
            <div class="screen-btn">
              <form class="layui-form">
                <input type="search" name="pmc081" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
              </form>
            </div>
          </span>
        </div>
        <div class="layui-content">
          <div class="con1 toggle-btn">
            <span class="screen">
              <span class="query-inner"></span>
            </span>
          </div>
          <div class="con2 toggle-content">
          </div>
          <table class="layui-table" id="table-device-alert"></table>
        </div>
        <div class="footer layui-btn-containner layui-form-item">
          <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="add">添加</button>
          <button class="btn2 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="cols">取消</button>
        </div>
      </div>
    </div>
    </script>
<script type="text/javascript ">
    layui.use(['table', 'admin', 'laypage', 'jquery', 'laytpl', 'tree', 'form', 'api', 'treeSelect','laydate','utill'], function () {
        var table = layui.table,
            admin = layui.admin,
            laypage = layui.laypage,
            setter = layui.setter,
            utill = layui.utill,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            tree = layui.tree,
            treeSelect = layui.treeSelect,
            api = layui.api,
            laydate = layui.laydate,
            form = layui.form;
        const cols = [[{
            type: 'checkbox',
            align: 'center',
        }, {
            type: 'numbers',
            title: '序号',
            align: 'center',
        },  {
            field: 'fia011',
            title: '资产编号'
        }, {
            field: 'fia01',
            title: '设备编号'
        }, {
            field: 'mover',
            title: '设备调机人员'
        }, {
            field: 'tcFtyName',
            title: '厂区'
        }, {
            field: 'tcProcName',
            title: '站别/工序'
        },]];
        var _TPL = {
                fiaacti: function (d) {
            if (d.fiaacti == 0) {
              return "<span>正常</span>";
            } else if (d.fiaacti == 1) {
              return "<span>停用</span>";
            } else if (d.fiaacti == 2) {
              return "<span>折旧</span>";
            }else if (d.fiaacti == 3) {
              return "<span>外送</span>";
            }else if (d.fiaacti == 4) {
              return "<span>折毕</span>";
            }else if (d.fiaacti == 5) {
              return "<span>出售</span>";
            }else if (d.fiaacti == 6) {
              return "<span>报废</span>";
            }else if (d.fiaacti == 7) {
              return "<span>折毕再现</span>";
            }else if (d.fiaacti == 8) {
              return "<span>改良</span>";
            }else if (d.fiaacti == 9) {
              return "<span>重估</span>";
            }
          },
        };

        //负责部门
        admin.req({
            url: api.host + api.xxcx.gem02,
            type: 'post',
            done: function (res) {
                function transferKey(odata) {
                    odata.forEach(obj => {
                        obj.title = obj.gem02
                        obj.children = obj.deptVOS
                        delete obj["gem02"]
                        delete obj["deptVOS"]
                        if (obj.children instanceof Array) {
                            transferKey(obj.children)
                        }
                    })
                    return odata
                }
                odataArr = transferKey(res.data)
                treeSelect.render({
                    elem: "#gem02",
                    node: odataArr,
                    done: (data) => {
                        $("#gem02").val(data.data.title + "/" + data.data.gem01);
                        $('#gem03').val(data.data.gem01);
                    }
                })

            }
        });

        //设备编号
        utill.fuzzmatch('#tcDetailFia01', {
                isShowValue: false,
                reqObj: {
                    url: api.host + api.xxcx.tcDetailFia01,
                    type: 'get',
                    dataType: 'json',
                    contentType: 'application/json',
                    data:{
                        fia01: $('#tcDetailFia01').val(),
                        pageNum: 1,
                        pageSize: 10000
                    },
                },
                dataTrans: function (res) {
                    return res.data.map((item) => {
                        return {
                            label: item.tcDetailFia01,
                            value: item.tcDetailFia01,
                            data: item
                        }
                    })
                }
            });
        admin.req({
            url: api.host + api.xxcx.tcDetailFia01,
            type: 'get',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    if(res.data[index] == null){
                        continue
                    }else{
                        str = str +
                        `<option value="${res.data[index].tcDetailFia01}">${res.data[index].tcDetailFia01}</option>`
                    }
                }
                $('#tcDetailFia01').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        //所在厂房
        admin.req({
            url: api.host + api.selectGSFty,
            type: 'post',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                    for (let index = 0; index < res.data.length; index++) {
                        if(res.data[index] == null){
                            continue
                        }else{
                             str = str +
                            `<option value="${res.data[index].tcFtyId}">${res.data[index].tcFtyName}</option>`
                        }
                    }
                $('#param').html(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        function dis(obj,doc){
            let val = $(obj).attr('value');
            if(val == null || val == ''){
                $(doc).attr('disabled','disabled')
            }else if(val != null || val != ''){
                $(doc).removeAttr('disabled')
            }
        }
        dis('#param','#param-two');
        //所在楼层  
        form.on('select(myselect)', function(res){
            var res = res.value;
            var ftyId = $('#param').val();
            if(ftyId != '' || ftyId != null){
                dis('#param','#param-two');
                admin.req({
                    url: api.host + api.selectFtyFlr,
                    type: 'get',
                    dataType: "json",
                    data: {ftyId},
                    contentType: 'application/json',
                    done: function (res) {
                        var str = '<option value=""></option>'
                        for (let index = 0; index < res.data.length; index++) {
                            if(res.data[index] == null){
                                continue
                            }else{
                                        str = str +
                                    `<option value="${res.data[index].tcFlrId}">${res.data[index].tcFlrName}</option>`
                            }
                        }
                        $('#param-two').html(str);
                        form.render(null, 'layuiadmin-form-tags');
                    }
                });
            }else if(ftyId == null || ftyId == ''){
                dis('#param','#param-two');
            }
        });
        //设备类型
        admin.req({
            url: api.host + api.xxcx.fic01,
            type: 'get',
            contentType: 'application/json',
            done: function (res) {
                function transferKey(odata) {
                odata.forEach(obj => {
                  obj.title = obj.fic02
                  obj.children = obj.child
                  delete obj["fic02"]
                  delete obj["child"]
                  if (obj.children instanceof Array) {
                    transferKey(obj.children)
                  }
                })
                return odata
              }
              odataArr = transferKey(res.data)
              treeSelect.render({
                elem: "#typeTree",
                node: odataArr,
                done: (data) => {
                  $("#typeTree").val(data.data.title);
                  $("#typeTreeTwo").val(data.data.fic01);
                }
              })
            }
        });
        //设备系列
        admin.req({
            url: api.host + api.xxcx.tcSeriesName,
            type: 'post',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    if(res.data[index] == null){
                        continue
                    }else{
                    str = str +
                        `<option value="${res.data[index].tcSeriesId}">${res.data[index].tcSeriesName}</option>`
                    }
                }
                $('#tcSeriesName').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        //设备型号
        admin.req({
            url: api.host + api.xxcx.fii02,
            type: 'post',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    if(res.data[index] == null){
                        continue
                    }else{
                    str = str +
                        `<option value="${res.data[index].fii02}">${res.data[index].fii02}</option>`
                    }
                }
                $('#fii02').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        //所在站别
        admin.req({
            url: api.host + api.xxcx.tcProcName,
            type: 'post',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    if(res.data[index] == null){
                        continue
                    }else{
                    str = str +
                        `<option value="${res.data[index].tcProcId}">${res.data[index].tcProcName}</option>`
                    }
                }
                $('#tcProcName').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        form.verify({
            num:[
                /^[\S]{8,99}$/,'请输入保管人工号最少八位,且不能出现空格'
            ],
            num1:[
            /^[\S]{8,99}$/,'请输入设备调机人工号最少八位,且不能出现空格'
            ]
            // num: function(value, item){
            // if(!new RegExp( /^[\S]{8,12}$/).test(value)){
            //         return '请输入保管人工号最少八位,且不能出现空格'
            //     }
            // },
            // num1: function(value, item){
            //     if(!new RegExp(/^[\S]{8,12}$/).test(value)){
            //         '请输入设备调机人工号最少八位,且不能出现空格'
            //     }else if(value == ''){
            //         return 
            //     }
            // }
        })
       
        //保管人
            // utill.fuzzmatch('#gen02', {
            //     isShowValue: false,
            //     reqObj: {
            //         url: api.host + api.xxcx.gen02,
            //         type: 'POST',
            //         dataType: 'json',
            //         contentType: 'application/json',
            //         data:JSON.stringify({
            //             azp02: $('#gen02').val(),
            //             pageNum: 1,
            //             pageSize: 10000
            //         }),
            //     },
            //     dataTrans: function (res) {
            //         return res.data.map((item) => {
            //             return {
            //                 label: item.gen02,
            //                 value: item.gen01,
            //                 data: item
            //             }
            //         })
            //     }
            // });

        //所属线别
        admin.req({
            url: api.host + api.xxcx.tcLineName,
            type: 'post',
            contentType: 'application/json',
            done: function (res) {
                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    if(res.data[index] == null){
                        continue
                    }else{
                    str = str +
                        `<option value="${res.data[index].tcLineId}"> ${res.data[index].tcLineName}</option>`
                    }
                }
                $('#tcLineName').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        // utill.fuzzmatch('#gen01', {
        //         isShowValue: false,
        //         reqObj: {
        //             url: api.host + api.xxcx.gen01,
        //             type: 'POST',
        //             dataType: 'json',
        //             contentType: 'application/json',
        //             data:JSON.stringify({
        //                 azp02: $('#gen01').val(),
        //                 pageNum: 1,
        //                 pageSize: 10000
        //             }),
        //         },
        //         dataTrans: function (res) {
        //             return res.data.map((item) => {
        //                 return {
        //                     label: item.gen02,
        //                     value: item.gen01,
        //                     data: item
        //                 }
        //             })
        //         }
        //     });
        function mytable(data){
            if(data.field.pmc01 != ''){
                data.field.pmc01 = $('#pmc081').data('name');
            }
            utill.columnCustom('#table', 'FiaFileListVO', {
            url: api.host + api.sbll.label,
            type: 'post',
            checkbox:false,
            where: data.field,
            templet: _TPL
        });
        }
        $('.query').click(function(){
            let val2 = $('#gen02').val();
            let val1 = $('#gen01').val();
            $('#gen01').removeAttr('lay-verify');
            $('#gen02').removeAttr('lay-verify');
            if(val1 == '' && val2 == ''){
                return 
            }else if(val1 != ''){
                $('#gen01').attr('lay-verify','num1');
                form.render();
            }else if(val2 != ''){
                $('#gen02').attr('lay-verify','num');
                form.render();
            }else if(val1 != '' || val2 != ''){
                $('#gen02').attr('lay-verify','num');
                $('#gen01').attr('lay-verify','num1');
                form.render();
            }
        })
        form.on('submit(*)', function (data) {
            $('#table').css('display', 'block');
                delete data.field.gen
                mytable(data);
                return false
        });
        $('.reset').click(function(){
            $('#gen01').removeAttr('lay-verify');
            $('#gen02').removeAttr('lay-verify');
            form.val('layuiadmin-form-tags',{
                'fia01': '',
                'fia011': '',
                'fia03' : '',
                'fiaacti' : '',
                'tcSeriesId' : '',
                'fia05' : '',
                'pmc01' : '',
                'fia14' : '',
                'fia15' : '',
                'tcProcId' : '',
                'fia17' : '',
                'gem01' : '',
                'gen01' : '',
                'gen021' : '',
                'gen' : ''
            });
            $('#gen02').attr('value','');
            $('#pmc081').attr('value','');
            layer.msg('清空完成')
            return false
        })
        table.on('tool(search-table-one)', function (obj) {
            var id = {
                id : obj.data.tcDevId
            };
            sessionStorage.setItem('id',JSON.stringify(id));
            var index = $(this).attr('data-index');
            var id = obj.data.tcDevId;
            var href = '[data-jump="home/paymentAccountForm"]';
            sessionStorage.setItem('layui-this',JSON.stringify(href));
            $(this).attr('lay-href', "/home/branch-one/detailed");
        });
       

        var alertEvent = {
        addDevice: function (layero, index) {
          table.render(
            $.extend({}, utill.tableOpts(), {
              elem: "#table-device-alert",
              id: "#table-device-alert",
              height: 300,
              toolbar: "",
              width: 'auto',
              url: api.host + api.xxcx.pmc081,
              where: {},
              cols: [[
                  { type: "radio",align:'left' },
                  { field: "pmc081", title: "供应商",minWidth: 250},
                ]
              ]
            })
          );
          form.on('submit(cols)', function(data){
                layer.close(index);
                return false;
            })
          table.on('radio', function(obj){
            form.on('submit(add)', function(data){
                $('#pmc081').attr('value','');
                $('#pmc081').attr('value',obj.data.pmc081);
                $('#pmc081').attr('data-name',obj.data.pmc01);
                layer.close(index);
                return false;
            })
        });
        form.on("submit(queryTableDeviceHeader)", function (data) {
            var pmc081 = data.field.pmc081;
            table.render(
            $.extend({}, utill.tableOpts(), {
              elem: "#table-device-alert",
              id: "#table-device-alert",
              height: 300,
              toolbar: "",
              width: 'auto',
              url: api.host + api.xxcx.pmc081,
              where: {pmc081},
              cols: [[
                  { type: "radio",align:'left' },
                  { field: "pmc081", title: "供应商",minWidth: 250},
                ]
              ]
            })
          );
            return false;
          });
          }
    }
    $("#pmc-box").on("click", "input", function (e) {
        layer.open({
          type: 1,
          title: false,
          area: ["662px", "536px"],
          fixed: true,
          shadeClose: true,
          closeBtn: 0,
          content: $("#addDeviceTpl").html(),
          success: alertEvent.addDevice
        });
      });

    });

</script>